<form class="layui-form" method="post">
    <div class="layui-form-item" style="padding-top: 2%">
        <label class="layui-form-label">服务平台：</label>
        <div class="layui-input-inline">
            <if condition="$date['id'] neq null">
                <volist name="server" id="vo">
                    <if condition="$date['service_id'] eq $vo['keyid']"><span style="display: block;  padding: 9px 0px;">{$vo['ser_name']}</span></if>
                </volist>
            <else/>
                <select name="serverid" lay-verify="required" lay-filter="service">
                    <option value=""></option>
                    <volist name="server" id="vo">
                        <option value="{$vo['keyid']}" >{$vo['ser_name']}</option>
                    </volist>
                </select>
            </if>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">镜像版本：</label>
        <div class="layui-input-block">
            <select name="imgid" lay-verify="required" id="imgcontent" lay-filter="img">
                <option value="">请先选择服务平台</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">主机配置：</label>
        <div class="layui-input-block">
            <select name="host" lay-verify="required" id="host" lay-filter="host">
                <option value="">请先选择服务平台</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">套餐价格：</label>
        <div class="layui-input-block">
            <span style="display: block;  padding: 9px 0px;" id="hostprice"></span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开通时长：</label>
        <div class="layui-input-inline">
            <input type="text" name="datehour" lay-verify="required" placeholder="" class="layui-input layui-input80">
        </div>
        <span style="display: block;  padding: 9px 0px;">小时</span>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="sitesub">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script id="imgtpl" type="text/html">
    <option value="{{d.id}}">{{d.name}}</option>
</script>
<script>
    form.render();
    var imglist;
    var hostlist;
    form.on('select(service)', function(data){
      /*  console.log(data.elem); //得到select原始DOM对象
        console.log(data.value); //得到被选中的值
        console.log(data.othis); //得到美化后的DOM对象*/
        getdata(data.value);
    });
    form.verify({
        price: [
            /^\d+(\.\d{1,2})?$/
            ,'整数或者带两位小数'
        ],
    });

    function getdata(serverid){
        var loadahsde=layer.load(1, {shade: [0.8, '#393D49'], time: 100000})
        $.get('__SELF__',{ser_id:serverid},function(data){
            layer.close(loadahsde);
            if(data.code == '4001'){
                layer.msg(data.msg,{icon: 5});
                return;
            }else if(data.code == '101'){
                 imglist =data['data']['hostimg'];
                hostlist=data['data']['host'];
                 imgcontent.innerHTML='<option value=""></option>';
                 layui.each(imglist, function (key, val) {
                 // v.k=k;
                 var getTpl = imgtpl.innerHTML;
                 laytpl(getTpl).render(val, function (html) {
                 imgcontent.innerHTML += html;
                 });
                 });
                $('#host').html('<option value=""></option>');
                var cpuhtml='';
                var sdkhtml='';
                layui.each(hostlist, function (key, val) {
                    if(key ==0 ){
                        cpuhtml+='<option value="'+val['id']+'" selected>'+val['dataother']['hostcpu']+"核"+'/'+val['dataother']['sdk']+"内存"+'/'+val['dataother']['diskzero']+"G"+val['dataother']['disktype']+'</option>';
                        $('#hostprice').html(val['price']+"元/小时");
                    }else{
                        cpuhtml+='<option value="'+val['id']+'">'+val['dataother']['hostcpu']+"核"+'/'+val['dataother']['sdk']+"内存"+'/'+val['dataother']['diskzero']+"G"+val['dataother']['disktype']+'</option>';
                    }
                });
                $('#host').html(cpuhtml);
                form.render();
            }else{
                layer.msg("数据错误",{icon: 5});
                return;
            }
        });

    }
    form.on('select(host)', function(data){
        host=data.value;
        layui.each(hostlist, function (key, val) {
            if(val['id'] == host){
                $('#hostprice').html(val['price']+"元/小时");
                return true;
            }
        });
    });
    form.on('submit(sitesub)', function(data){
        var userInfo = data.field;
        var url = "__SELF__";
        $.post(url,userInfo,function(data){
            if(data.code == '4001'){
                layer.msg(data.msg,{icon: 5});
                return;
            }else if(data.code == '101'){
                layer.msg(data.msg, {
                    icon: 6,
                    time: 2000
                }, function(){
                    location.reload();
                });
            }else{
                layer.msg("数据错误",{icon: 5});
                return;
            }
        });

        return false;
    });

</script>